<template>
  <view>
	  <view class="item" :id="`zp-id-${item.zp_index}`" :key="item.zp_index" v-for="(item,index) in orderList">
		  <view class="card">
		  	<view @click="detail(item)" class="left">
		  		<view class="avatar-img">
		  			<u-avatar class="img" :src="item.avatar"></u-avatar>
		  		</view>
		  		<!-- <view class="avatar" v-else>
		  			<image class="img" :src="item.avatar"></image>
		  			<image class="gif" src="@/static/images/avatar.gif"></image>
		  		</view> -->
		  	</view>
		  	<view class="right">
		  		<view class="card-header">
		  			<view class="box3">
		  				<view class="box1">
		  					<view class="box2">
		  						<view class="nickname">{{item.nickname}}</view>
		  						<view class="sex-box" v-if="item.sex == 1">
		  							<u-icon name="ziyuan2" custom-prefix="iconfont"></u-icon>
		  							<view class="age">{{item.age}}</view>
		  						</view>
								<view class="sex-box nan" v-if="item.sex == 0">
									<u-icon name="ziyuan3" custom-prefix="iconfont"></u-icon>
									<view class="age">{{item.age}}</view>
								</view>
		  					</view>
		  					<view class="tag-list">
		  						<view class="tag" v-if="item.trendType == 1">Ta是店员</view>
		  						<view class="tag">发布于 {{item.createTimeStr}}</view>
		  					</view>
		  				</view>
		  				<!-- <view class="fans"  @click="fans(item)">
							<u-icon v-if="item.fans" name="star-fill" size="40"></u-icon>
							<u-icon v-else name="star" size="40"></u-icon>
		  				</view> -->
						<view v-if="item.trendType == 0" class="chat-btn" @click="chat(item)">
							 <u-icon name="chat" size="28" color="#fff"></u-icon>
							 <view class="text">密聊</view>
						</view>
						<view v-if="item.trendType == 1" class="chat-btn" @click="detail(item)">
							 <u-icon name="phone" size="28" color="#fff"></u-icon>
							 <view class="text">下单</view>
						</view>
		  			</view>
		  		</view>
		  		<view class="card-content"> 
		  			<view class="text-box">  
		  				<rich-text :nodes="item.content"></rich-text>
		  			</view>
		  		</view>
		  		<view class="image-box" v-if="item.fileType == 0">
		  			<img-box @preAd="preAd" :ad="item.adStatus" :file="item.file"></img-box>
		  		</view>
				<view class="voice-box" v-if="item.fileType == 1">
					<voice-play :sec="item.seconds" @tap.stop="playAudio(item)" :isPlay="item.id == playId"></voice-play>
				</view>
				<view class="video-box" v-if="item.fileType == 2">
					<video-box :file="item.file"></video-box>
				</view>
		  		<view class="topic-list">
		  			<view class="topic" @click="toCity(item)">
		  				<u-icon name="map-fill" size="40" color="#3cc9a4"></u-icon>
		  				<view class="tag-text">{{item.city}}</view>
						<u-icon name="arrow-right" size="24" color="#3cc9a4"></u-icon>
		  			</view>
		  		</view>
		  		<view class="card-footer">
		  			<!-- <view class="toolbar">
		  				<u-icon name="pinglun" size="38" custom-prefix="iconfont"></u-icon>
		  				<view class="toolbar-text">22</view>
		  			</view> -->
		  			<view class="toolbar" @click="thumb(item)">
						<u-icon v-if="item.like" name="thumb-up-fill" color="var(--ui-BG-Main)" size="40"></u-icon>
		  				<u-icon v-else name="thumb-up" size="40"></u-icon>
		  				<view class="toolbar-text" v-if="item.likeNum > 0">{{item.likeNum}}</view>
						<view class="text" v-else>点赞</view>
		  			</view>
		  		</view>
		  	</view>
		  </view>
	  </view>
	  
  </view>
</template>

<script>
	import dayjs from 'dayjs';
	import isToday from "dayjs/plugin/isToday";
	import isYesterday from "dayjs/plugin/isYesterday";
	dayjs.extend(isToday);
	dayjs.extend(isYesterday);
	import ImgBox from '@/pages/tabbar/components/trend/imgBox.vue';
	import VideoBox from '@/pages/tabbar/components/trend/videoBox.vue';
	import VoicePlay from '@/pages/tabbar/components/trend/voicePlay.vue';
	import sheep from '@/sheep';
	import { WxaSubscribeTemplate } from '@/sheep/util/const';
	import { showAuthModal } from '@/sheep/hooks/useModal';
	import adVideoUtils from '@/sheep/util/adVideoUtils'; 
	import ImConversationApi from '@/sheep/api/im/memberConversation';
	import TrendApi from '@/sheep/api/worker/trend'; 
	const audio = uni.createInnerAudioContext();
	export default {
		components: {
			ImgBox,
			VideoBox,
			VoicePlay,
		},
		props: {
			virtualList: {
				type: Array,
				default: [],
			},
		},
		data() {
			return {
				playId: null,
			}
		},
		computed: {
			authType() {
				return sheep.$store('modal').auth;
			},
			orderList() {
				this.virtualList.forEach((order) => order.createTimeStr = this.showDayTime(order.createTime));
				return this.virtualList;
			},
			tradeConfig() {
				return sheep.$store('user').tradeConfig;
			},
		},
		methods: {
			showDayTime(datetime) {
			  if (!datetime) return "";
			  const weeks = [
			   "星期日",
			   "星期一",
			   "星期二",
			   "星期三",
			   "星期四",
			   "星期五",
			   "星期六",
			  ];
			  // 当天 显示时分
			  if (dayjs(datetime).isToday()) {
			    return dayjs(datetime).format("HH:mm");
			  }
			  // 昨天 昨天+时分
			  if (dayjs(datetime).isYesterday()) {
			    return `昨天 ${dayjs(datetime).format("HH:mm")}`;
			  }
			  // 本周 显示周几+时分
			  if (dayjs().isSame(datetime, "week")) {
			    const weekIndex = dayjs().day();
			    return `${weeks[weekIndex]} ${dayjs(datetime).format("HH:mm")}`;
			  }
			  // 本周之前 显示年月日
			  if (dayjs(datetime).isBefore(new Date(), "week")) {
			    return dayjs(datetime).format("YYYY-MM-DD");
			  }
			},
			playAudio(e) {
				if(this.playId == e.id){
					this.playId = null;
					audio.stop();
					return;
				}
				this.playId = e.id;
				//语音自然播放结束
				audio.onEnded((res) => {
					this.playId = null;
				});
				audio.src = e.file;
				audio.play();
			},
			thumb(e) {
				TrendApi.createTrendLike({
					trendId: e.id,
				}).then((res) => {
					if(res) {
						if(e.like){
							e.like = false;
							e.likeNum = e.likeNum-1;
							sheep.$helper.toast('取消点赞');
						}else{
							e.like = true;
							e.likeNum = e.likeNum+1;
							sheep.$helper.toast('点赞成功');
						}
					}
				});
			},
			preAd(run) {
				adVideoUtils.videoAdInit(this.tradeConfig.adUnitId);
				adVideoUtils.videoAdShow()
				.then((res) => {
				  if (res) {
					run(true);
				  } else {
					console.log('广告提前退出')
					run(false);
				  }
				})
				.catch((err) => {
					console.log('广告加载失败')
					run(false);
				});  
			},
			fans(e) {
				TrendApi.createClerkFans({
					workerClerkId: e.workerClerkId,
				}).then((res) => {
					if(res){
						if(e.fans){
							sheep.$helper.toast('取消收藏');
							e.fans = false;
						}else{
							sheep.$helper.toast('收藏成功');
							e.fans = true;
						}
					}
				});
			},
			detail(e) {
				if(e.workerClerkId){
					this.$u.route({
						url: 'pages/clerk/detail/index',
						params: {
							id: e.workerClerkId,
						}
					});
				}else{
					sheep.$router.go('/pages/user/detail/index',{id: e.userId});
				}
			},
			toCity(e) {
				this.$u.route({
					url: 'pages/trend/city/list',
					params: {
						city: e.city,
					}
				});
			},
			chat(e) {
				const isLogin = sheep.$store('user').isLogin;
				if(!isLogin) {
					showAuthModal();
					return;
				}
				
				const userInfo = sheep.$store('user').userInfo;
				// 如果用户已经有头像和昵称,不要每次登录都要重新上传头像。
				if(userInfo.visible) {
					// #ifdef MP-WEIXIN
					this.subscribeMessage();
					// #endif
					
					ImConversationApi.createMemberConversation({
						userId: e.userId,
						groupType: 1,
						lastMessageContentType: 1,
					}).then(res => {
						if(res.data){
							sheep.$router.go('/pages/im/index',{groupId: res.data, receiveUserId: e.userId});
						}
					});
					return;
				}
				// 触发小程序授权信息弹框
				// #ifdef MP-WEIXIN
				showAuthModal('mpAuthorization');
				// #endif
				
				// #ifndef MP-WEIXIN
				showAuthModal('h5Authorization');
				// #endif
			},
			subscribeMessage() {
			  const event = [WxaSubscribeTemplate.UNREAD_MESSAGE];
			  sheep.$platform.useProvider('wechat').subscribeMessage(event, () => {
			    // 订阅后记录一下订阅状态
			    uni.removeStorageSync(WxaSubscribeTemplate.UNREAD_MESSAGE);
			    uni.setStorageSync(WxaSubscribeTemplate.UNREAD_MESSAGE, '已订阅');
			  });
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.item {
		display: flex;
		flex-direction: column;
		padding: 0 30rpx;
		margin-bottom: 30rpx;
	}
	
	.card {
		padding: 30rpx 0;
		border-bottom: 1rpx solid #eeeeee;
		padding-top: 0;
		display: flex;
		
		.right {
			display: flex;
			flex-direction: column;
			flex: 1;
			padding-top: 10px;
		}
	}
	
	.avatar-img{
		margin-right: 5px;
		width: 110rpx;
		height: 110rpx;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 8rpx;
		
		.img {
			width: 100%;
			height: 100%;
			border-radius: 100%;
		}
	}
	
	.avatar{
		margin-right: 5px;
		width: 110rpx;
		height: 110rpx;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		
		.img {
			width: 75%;
			height: 75%;
			border-radius: 100%;
		}
		.gif {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			width: 100%;
			height: 100%;
		}
	}
	
	.card-header {
		display: flex;
		align-items: center;
		
		.box1 {
			.tag-list {
				display: flex;
				align-items: center;
				font-size: 22rpx;
				color: #666666;
				margin-top: 4rpx;
				
				.tag::after {
				  content: '·';
				  padding: 0 10rpx; /* 添加一些间隔 */
				}
				
			}
			
			.tag-list .tag:last-child::after {
				content: unset;
			}
		}
		
		.box2 {
			display: flex;
			align-items: center;
			line-height: 40rpx;
			
			.nickname {
				font-size: 28rpx;
				color: #333333;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
				max-width: 200rpx;
			}
			
			.sex-box {
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #d06b8d1f;
				border-radius: 20px;
				font-size: 20rpx;
				padding: 4rpx 10rpx;
				color: #d06b8d;
				line-height: 24rpx;
				margin: 0 5px;
				
				.age {
					margin-left: 2px;
				}
			}
			
			.nan {
				background-color: #007aff1a;
				color: #007aff;
			}
		}
		
		.box3 {
			display: flex;
			justify-content: space-between;
			flex: 1;
			align-items: center;
		}
		
		.fans {
			width: 60rpx;
			display: flex;
			justify-content: flex-end;
			height: 60rpx;
			align-items: center;
			color: var(--ui-BG-Main);
			font-size: 24rpx;
			padding-right: 3px;
		}
		
		.chat-btn {
			display: flex;
			align-items: center;
			background-color: var(--ui-BG-Main);
			justify-content: center;
			border-radius: 40px;
			color: #fff;
			font-size: 22rpx;
			padding: 5px;
			
			.text {
				margin-left: 2px;
			}
		}
	}
	
	.card-content {
		margin-top: 20rpx;
		margin-bottom: 10rpx;
		
		.text-box {
			font-size: 26rpx;
			line-height: 180%;
			white-space: pre-wrap;
			letter-spacing: 2rpx;
		}
	}
	
	.topic-list { 
		display: flex;
		align-items: center;
		margin-top: 10px;
		
		.topic {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			margin-right: 20rpx;
			color: var(--ui-BG-Main);
			font-weight: bold;
			
			.tag-text {
				margin-left: 2px;
			}
		}
	}
	
	.card-footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 30rpx;
		
		.toolbar {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			color: #666666;
			width: 80rpx;
			height: 40rpx;
			flex: 1;
		}
		
		.toolbar-text {
			font-size: 26rpx;
			margin-left: 5px;
		}
		
		.text {
			font-size: 24rpx;
			margin-left: 5px;
		}
	}
</style>